<template>
    <div class="matCategory">
        <Breadcrumb :firstMenu="'基础数据'" :secondMenu="'物料类别'"/>
        <el-row  class="operBtns">
            <el-button  icon="el-icon-plus" @click="add()">添加</el-button>
            <el-button  icon="el-icon-edit"  @click="edit()">编辑</el-button>
            <el-button  icon="el-icon-delete" @click="del()">删除</el-button>
        </el-row>
        <div class="table">
          <TableContent :parentTableData="result" :parentDefault="defaultProps" v-on:setCurrentMeal="selectMeal" v-on:setParentSelection="setSelection"/>
        </div>
        <AddMeal v-on:cancelModule="cancelModule" v-if="dialogVisible" v-on:getParentTableData="getTableData" :parentTitle="title" :parentCurrentMeal="currentMeal"></AddMeal>
    </div>
</template>

<script>
import Breadcrumb from "@/components/breadCrumb/breadCrumb.vue"
import axios from "axios"
import TableContent from '@/views/matCategory/components/tableContent/tableContent.vue';
import AddMeal from '@/views/matCategory/components/addMat/addMat.vue';
export default {
    components:{
        Breadcrumb,
        TableContent,
        AddMeal
    },
    data(){
        return{
            urlPrev: 'http://39.106.7.166:8097/',
            defaultProps: {
                pageSize: 10,
                pageIndex: 1,
                restaurantId: "1"
            },
            result: {},
            multipleSelection: [],
            dialogVisible: false,
            currentMeal: {}, // 当前选中餐别
            title: 1 // 1 新增餐别  2编辑餐别
        };
    },
    mounted() {
        this.getTableData();
    },
    methods:{
        setSelection(arr){
        this.multipleSelection = arr;
        console.log(arr)
      },
        //获取表格数据
        getTableData(){
            const url= this.urlPrev+`api/bdmateriatype/getmateriatype`;
            axios({method: 'post', url: url, data: this.defaultProps})
            .then(rsp=>{
                if(rsp.data.status==1){
                    console.log(rsp)
                    this.result=rsp.data;
                } else {
                    console.log("获取失败")
                }
            })
            .catch(err=> console.log(err));
        },
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      // 新增
      add() {
          this.title = 1;
          this.dialogVisible = true;
      },
      // 编辑
      edit() {
        if(Object.keys(this.currentMeal).length) {
          this.title = 2;
          this.dialogVisible = true;
        }else {
           this.$message({
              message: '请先选择一种物料类别',
              type: 'warn',
          });
        }
      },
      // 删除
      del(){
        if(!this.multipleSelection.length){
          this.$message({
              message: '请先选择一种物料类别',
              type: 'warn',
          });
        }else {
           this.$confirm('删除后不可恢复，确认删除选中的数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteMeal();
          })
        }
      },
       //删除
      deleteMeal() {
        let arr = [];
        this.multipleSelection.forEach(item => {
          arr.push(item.id)
        });
        const url = this.urlPrev+`api/bdmateriatype/delmateriatype?ids=`+arr;
        axios({ method: 'post', url: url})
            .then(rsp => {
                if (rsp.data.status == 1) {
                   this.getTableData();
                }else if(rsp.data.status == 0){
                    this.$message({
                        message: rsp.data.message,
                        type: 'error',
                    });
                }
            })
            .catch(err => console.log(err));
      },
      // 关闭模态框回调
      cancelModule(val) {
          this.dialogVisible = false;
      },
      // 当前选中餐别
      selectMeal(meal){
        this.currentMeal = meal;
        console.log(meal);
      }
    }
}
</script>

<style lang="scss" scoped>
.matCategory {
    width: 100%;
    height: 100%;
    @include flex();
    flex-direction: column;
    .model{
       width: 100%;
    }
    .table{
        width: 100%;
        height: calc(100% - 203px);
    }
}
</style>